<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="format-detection" content="telephone=no, address=no, email=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<title>登录</title>
		<link rel="stylesheet" href="css/mui.min.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
		<style>
			body{background: url(img/login/loginBg.png) no-repeat; background-size:100%}
			.mui-content,.mui-input-group,.mui-input-group .mui-input-row:after{background:none;}
			.title{font-size:18px;margin-bottom:0.57rem;}
			.mui-content{position: absolute; top: 58%; left: 50%; transform: translate(-50%,-50%);width: 100%;padding: 0 0.54rem;color:#fff;}
			.mui-input-group .mui-input-row{background:#fff;border:0.01rem solid #ddd;color:#999;height:0.88rem;margin-bottom:0.14rem;border-radius:3px;padding:0.15rem 0;}
		 	.mui-input-row label{width:21%;line-height:0.55rem;padding: 0px;text-align: center;border-right:1px solid #ddd;}
		 	.mui-input-row label~input{width:79%;padding:0 0.15rem;}
		 	input[type=text],input[type=password]{height:0.55rem;}
		 	 .mui-input-row .mui-input-password~.mui-icon-eye{top:0.2rem;height:0.55rem;}
		 	 #forgetPassword{float:right;margin-top:0.31rem;
		 	 transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1);}
		 	
		 	#forgetPassword{font-size:24px;position:relative}
		 	#forgetPassword:after{position: absolute; bottom: 0; right: 0; left: -0.02rem; width:100%; height: 1px; content: ''; background-color: #fff}
			@media screen and (min-width:321px) and (max-width:375px){
				#forgetPassword{font-size:12px;}
			}
			@media screen and (min-width:376px) and (max-width:414px){
				#forgetPassword{font-size:14px;}
			}
			@media screen and (min-width:415px) and (max-width:639px){
				#forgetPassword{font-size:16px;}
			}
			@media screen and (min-width:640px) and (max-width:719px){
				#forgetPassword{font-size:18px;}
			}
			@media screen and (min-width:720px) and (max-width:749px){
				#forgetPassword{font-size:20px;}
			}
			@media screen and (min-width:750px) and (max-width:799px){
				#forgetPassword{font-size:24px;}
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<p class="title  colorWhite text-center">在乎经销商管理系统</p>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input type="text" class="mui-input-clear" id="account" placeholder="请输入用户名">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input type="password" class="mui-input-password" id="password" placeholder="请输入密码">
				</div>
				<div id="message" class="none transition">
					<label>用户名或者密码错误</label>
				</div>
				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-btn-primary mui-btn-full" id="login" style="height:44px;border-color:#f1c40f;background:#f1c40f;color:#fff;">确认</button>
				</div>
				
				<label id="forgetPassword">忘记密码？</label>
			</form>
		</div>
	</body>
	<script src="js/resize.js"></script>
	<script src="js/mui.min.js"></script>
	<script src="js/app.js"></script>
	<script type="text/javascript" src="js/update.js"></script>
	<!--<script type="text/javascript" src="js/immersed.js"></script>
	<script type="text/javascript" src="js/shortcut.js"></script>-->
	<script type="text/javascript" charset="utf-8">
		(function($, doc) {
			$.plusReady(function() {
				$.init({
					statusBarBackground: '#0ab0e4'
				});
				//只能在这里面调用h5+的原生API
				plus.screen.lockOrientation("portrait"); //锁定屏幕为书屏幕正方向
				//预加载等下要跳转的页面
				var mainPage = $.preload({
					"id": 'index',
					"url": 'index.html'
				});
				var main_loaded_flag = false;
				mainPage.addEventListener("loaded", function() {
					main_loaded_flag = true;
				});

				var toMain = function() {
					//使用定时器的原因：
					//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
					var id = setInterval(function() {
						if(main_loaded_flag) {
							clearInterval(id);
							$.fire(mainPage, 'show', null);
							mainPage.show("pop-in");
						}
					}, 20);
				};

				var settings = app.getSettings();
				var state = app.getState();
				//检查 "登录状态/锁屏状态" 开始
				if(settings.autoLogin && state.token && settings.gestures) {
					$.openWindow({
						url: 'unlock.html',
						id: 'unlock',
						show: {
							aniShow: 'pop-in'
						},
						waiting: {
							autoShow: false
						}
					});
				} else if(settings.autoLogin && state.token) {
					toMain();
				}
				setTimeout(function() {
					//关闭 splash
					plus.navigator.closeSplashscreen();
				}, 600);
				
				
				//这里开始侦听事件了
				var loginButton = doc.getElementById('login');
				var accountBox = doc.getElementById('account');
				var passwordBox = doc.getElementById('password');
				var forgetButton = doc.getElementById('forgetPassword');
				loginButton.addEventListener('tap',function(event){	
					var loginInfo = {
							account: accountBox.value,
							password: passwordBox.value
					};
					
					app.login(loginInfo, function(err) {
						if (err) {
							plus.nativeUI.toast(err);
							return;
						}
						toMain();
					});
				})
				
					
				forgetButton.addEventListener('tap', function(event) {
						$.openWindow({
							url: 'forget_password.html',
							id: 'forget_password',
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					}, false);	
					
					
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
					
			})
		}(mui, document))
		/*var check = true;
		mui("#input_example input").each(function() {
			//若当前input为空，则alert提醒 
			if(!this.value || this.value.trim() == "") {
				var label = this.previousElementSibling;
				mui.alert(label.innerText + "不允许为空");
				check = false;
				return false;
			}
		}); //校验通过，继续执行业务逻辑 
		if(check) {
			mui.alert('验证通过!')
		}*/
	</script>

</html>